<template>
    <div>

<!-- 添加按钮 -->
 <el-button type="primary" icon="el-icon-edit" circle class="add" @click="show">添加</el-button>

        <el-table
            :data="tableData"
            border
            style="width: 80%">
            <el-table-column
                border
                prop="ID"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="type"
                label="课程类型"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="课程名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="desc"
                label="课程描述"
                width="180">
            </el-table-column>
            
            <el-table-column>
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除 </el-button>
                </template>
            </el-table-column>
            

        </el-table>

<!-- 表单 -->
    <el-dialog title="提示" width="600px" :before-close="handleClose" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" label-width="80px" style="width:500px">
        <el-form-item label="ID">
            <el-input v-model="form.ID"></el-input>
        </el-form-item>

        <el-form-item label="课程类型">
            <el-input v-model="form.type"></el-input>
        </el-form-item>

        <el-form-item label="课程名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="课程简介">
            <el-input v-model="form.desc"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="onCancel">取消</el-button>
        </el-form-item>
    </el-form>

    </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                ID:1,
                type:'第二专业',
                name: 'web',
                desc: '简介',
                del: '删除'
            }, {
                ID:2,
                type:'第二专业',
                name: 'web',
                desc: '简介',
                del: '删除'
            }],
            form: {
                ID: '',
                type: '',
                name: '',
                desc: '',
                del:''
            },
            dialogVisible:false
        }
    },
    methods:{
        show() {
            this.dialogVisible = true
        },
        handleDelete(index) {
            this.tableData.splice(index,1)
        },
        handleClose(done) {
             this.$confirm('确认关闭？')
                .then(()=> {
                done();
                })
                .catch(() => {});
        },
        onSubmit() {
            this.tableData.push({ID:this.form.ID,type:this.form.type,name:this.form.name,desc:this.form.desc})
            this.dialogVisible = false
        },
        onCancel() {
             this.dialogVisible = false
        }
    }
}
</script>

<style scoped>

.el-table {
    margin-top: 100px;
}
.el-button.is-circle {
    position: fixed;
    top: 30px;
    left: 10px;
    border-radius: 10%;
}

el-dialog__wrapper {
    width: 500px;
}
  
</style>